<template>
    <div>
        <!-- 导航栏 -->
        <div class="nav">
            <ul>
                <li><a style="cursor: pointer;" @click="goLogin">登录</a></li>
                <li><a style="cursor: pointer;" @click="goRegister">注册</a></li>
            </ul>
        </div>
        <!-- 新闻详情页面 -->
        <div class="xinwen" >
            <h3>{{ newsdatil.new_title }} </h3>
            <div class="b2">
                <p style="width:100% ;"><b style="color:rgb(35, 175, 230) ;">{{ newsdatil.publisher_id }} </b>
                    <b style="font-size: .8rem; margin-top: 1vh; width: 100%;">  {{ newsdatil.new_time }}</b></p>
                <b style="font-size: 1.1rem; width: 3vw; line-height: 4.5vh; cursor: pointer;" @click="focus">关注</b>
                <i class="el-icon-star-on" style="width: auto;cursor: pointer;" @click="collect"></i>
                <b style="cursor: pointer;" @click="like">♥</b>
            </div>
            <hr>
            <p>{{ newsdatil.new_content }}</p>
        </div>
        <hr>
        <!-- 发表评论区 -->
        <div class="pinglun">
            <h3>发表你的评论吧</h3>
            <div class="pinglunlan"><input v-model="shurupl" placeholder="请输入评论"></div>
            <div class="bt">
                <div class="button" style="cursor:pointer;" @click="addcomment">发布</div>
            </div>
        </div>
        <hr>
        <!-- 评论区 -->
        <div class="pinglunlist">
            <h2>最热评论</h2>
            <ul>
                <li v-for="item in commentlist" :key="item.commentId">
                    <!-- 父评论 -->
                    <div class="pinglun1">
                        <img :src=item.userInfo.avtar>
                        <span>{{ item.userInfo.username }}<div class="time">{{ item.commentTime }}</div></span>
                        <p><b>{{ item.commentContent }}</b>
                            <b style="cursor:pointer; margin-left: 2vw; color: rgb(52, 189, 239); "
                               @click="dialog = true, pid = item.commentId">回复
                            </b>
                            <b
                                    v-if="item.userInfo.id == 8"
                                    style="cursor:pointer; margin-left: 2vw; color: rgb(201, 11, 11); "
                                    @click="del(item.commentId)">删除
                            </b>
                        </p>
                    </div>
                    <!-- 子评论 -->
                    <div class="pinglun2" v-for="item2 in item.childList" :key="item2.commentId">
                        <img :src=item2.userInfo.avtar>
                        <span>{{ item2.userInfo.username }}<div class="time">
                <p>{{ item2.commentTime }} </p>
              </div></span>
                        <p><b>{{ item.commentId != item2.parentId ? '@' + item2.parentId + '：' : '' }}{{ item2.commentContent }}</b>
                            <b style="cursor:pointer; margin-left: 2vw; color: rgb(28, 135, 223); "
                               @click="dialog = true, pid = item2.commentId">回复
                            </b>
                            <b
                                    v-if="item2.userInfo.id == 8"
                                    style="cursor:pointer; margin-left: 2vw; color: rgb(201, 11, 11); "
                                    @click="del(item2.commentId)">删除
                            </b>
                        </p>
                    </div>
                    <hr>
                </li>
            </ul>
        </div>
        <!-- 回复评论弹窗 -->
        <el-dialog title="回复" :visible.sync="dialog" width="30%" center>
            <el-input v-model="content"></el-input>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false, pid = ''">取 消</el-button>
        <el-button type="primary" @click="reply">确 定</el-button>
      </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            dialog: false,//评论弹窗
            // newsId:'',
            newsId:localStorage.getItem("newsId"),
            //传入的新闻id，先在这边写死
            userId:9,//传入的用户id，先在这边写死
            shurupl: '',//发布评论框
            content: '',//回复评论框
            pid: '',//父评论id
            newsdatil:[],//新闻
            commentlist: [],//该新闻id下的所有评论
            isLike:false,
            iscollet:false,
            isFollow:false
        
    }
  },
//   activated() {
//     if (this.$route.query.id ) {
//       this.newsId = this.$route.query.id;
//       console.log("传值了吗")
     
//         }
//     },
// watch: {
    
//     newsId(newV) {
    
//        this.getnews(newV);  
//        console.log("传值"+newV)
    
//     },


//     },
    methods: {
        //登录路由跳转
        goLogin() {
            this.$router.push('')//这里加上登录页面路由
        },
        //注册路由跳转
        goRegister() {
            this.$router.push('')//这里加上注册页面路由
        },
        //获取新闻详情
        async getnews() {
                        const { data: res } = await this.$http.get('/news/getNewsDetail',
                {
                    params: {
                        new_id:this.newsId
                    }
                })
            this.newsdatil = res[0]
            console.log(res)
        },
        //获取所有评论
        async getcomment() {
            const { data: res } = await this.$http.get('/comments/CommentListByNewsId',
                {
                    params: {
                        new_id: this.newsId//新闻id，现在是传一个死数据进去
                    }
                })
            if (res.code == 200) {
                this.commentlist = res.data
                /* console.log(this.commentlist); */
            }

        },
        //增加评论
        async addcomment() {
            var obj = {
                commentContent: this.shurupl,
                newsId: this.newsId,//死数据，传过来的新闻id
                userId: this.userId//死数据，登录的用户id
            }
            const { data: res } = await this.$http.post('/comments/addComment', obj)
            if (res.code == 200) {
                //清空文本框内容
                this.shurupl ='';
                this.$message.success("添加成功！")
            }else{
                this.$message.error("添加失败！")
            }
        },
        //评论回复
        async reply() {
            var obj = {
                commentContent: this.content,
                parentId: this.pid,
                newsId: this.newsId,//死数据，传过来的新闻id
                userId: this.userId//死数据，传过来的用户id
            }
            const { data: res } = await this.$http.post('/comments/addComment', obj)
            // 回复
            if (res.code == 200) {
                this.dialog = false
                this.pid = ''
                this.content = ''
                this.$message.success("添加成功！")
            }else{
                this.$message.error("添加失败！")
            }
        },
        // 删除自己的评论
        async del(cid){
            const { data: res } = await this.$http.get('/comments/deleteUserComment',
                {
                    params: {
                        userId: this.userId,//死数据,传过来的用户id
                        commentId:cid
                    }
                })
            if (res.code == 200) {
                this.$message.success("删除成功！")
            }else{
                this.$message.error("删除失败！")
            }
            console.log(res);
        },

        async focus(){
            // 关注的接口
        },
        async collect(){
        } ,
        // 是否like
        async initData(){
            const { data: resLike } = await this.$http.get('/querylike',
                {
                    params: {
                        userId:this.userId,
                        newsId:this.newsId,
                    }
                })
            if (resLike != null && resLike.like_state ) {
                this.isLike = true ;
            }

            // focus
            const { data: res } = await this.$http.get('/queryfocus',
                {
                    params: {
                        user_id:this.userId,
                        newsp_id:newsdatil.publisherId,
                    }
                })
            if (res != null && res.focus_state ) {
                this.isFollow = true ;
            }
            console.log(this.isFollow);

        } ,
        //改变状态
        async like(){
            // const { data: res } = await this.$http.get('/changelike',
            //   {
            //     params: {
            //       userId:2,
            //       newsId:this.newsId
            //     }
            //   })

            // if (res=="insert") {
            //   this.isLike = true ;
            //   this.$message.success("点赞成功")
            // } else {
            //   this.isLike = !this.isLike ;
            // }
        },
        //喜欢总数

    },
    //挂载
    created() {
        this.getnews()
        this.getcomment()
        // this.initData();
    }
}
</script>

<style>
* {
    margin: 0px;
    padding: 0px;
}

.lovesd{
    color: rgb(232, 98, 158);
    background-color: rgb(232, 98, 158);
}

.xinwen hr {
    width: 800px;
}

li hr {
    background-color: rgba(0, 0, 0, 0.37);
    height: 0.1px;
}

.b2 {
    height: 70px;
    width: 800px;
}

.xinwen {
    width: 800px;
    margin: 0 auto;
}

.b2 b {
    float: left;
    width: 20px;
    font-size: 30px;
    margin-top: 5px;
}

.b2 a {
    float: left;
    width: 70px;
    font-size: 25px;
    margin-top: 10px;
    margin-left: 10px;
    float: left;
}

.b2 i {
    float: left;
    width: 50px;
    font-size: 30px;
    margin-top: 10px;
}

.b2 p {
    width: 200px;
    float: left;
    font-size: 20px;
    margin-top: 15px;
}

.pinglunlist i {
    float: right;
    width: 50px;
    font-size: 15px;
    margin-right: 100px;
}

.pinglunlist .pinglun1 {
    width: 700px;
    height: 100px;
    position: relative;
    /* background-color: rgb(6, 11, 11, .6); */
}

.time a {
    float: right;
    width: 100px;
    font-size: 15px;
}

.nav {
    width: 100%;
    height: 60px;
    background-color: rgb(0, 136, 255);
}

.nav ul {
    float: right;
    width: 300px;
    height: 60px;
}

.nav span {
    width: 900px;
    font-size: 35px;
    float: left;
}

.nav p {

    font-size: 10px;
    float: left;
    margin-top: 40px;
}

.nav ul li {
    width: 100px;
    height: 60px;
    list-style-type: none;
    float: left;
    text-align: center;
    font-size: 20px;
    line-height: 50px;
}

.nav ul li a {
    width: 80px;
    height: 40px;
    margin: 10px;
    text-decoration: none;
    color: aliceblue;
}

img {
    width: 100%;
    height: 600px;
}

hr {
    height: 10px;
    width: 1000px;
    margin: 0 auto;
    background-color: rgb(0, 136, 255);
}

.pinglun {
    width: 800px;
    height: 330px;
    margin: 0 auto;
    border-width: 1px 0 1px 0;
}

h3 {
    text-align: center;
    font-size: 30px;
}

.tx {
    width: 98px;
    height: 100px;
}

.tx img {
    width: 98px;
    height: 100px;
    border: 50%;
}

.pinglunlan {
    width: 700px;
    height: 150px;
    float: right;
}

.pinglunlan input {
    height: 100px;
    width: 700px;
}

.bt {
    width: 700px;
    height: 40px;
    float: right;
}

.bt div {
    height: 30px;
    width: 80px;
    float: right;
    background-color: rgb(0, 136, 255);
    text-align: center;
}

.pinglunlist {
    width: 800px;
    margin: 0 auto;
}

.pinglunlist ul {
    width: 800px;
    margin: 0 auto;
}

.pinglunlist ul li {
    width: 800px;
    list-style-type: none;
}

.pinglunlist ul li img {
    width: 100px;
    height: 100px;
    border: 50%;
    float: left;
}

.pinglunlist ul li span {
    /* width: 100px; */
    height: 50px;
    float: left;
    padding-left: 2vw;
    font-size: 14px;
}

.pinglunlist ul li p {
    width: 500px;
    height: 30px;
    position: absolute;
    bottom: 2vh;
    left: 8vw;
}

.pinglunlist ul li .time p {
    width: 300px;
    height: 50px;

    font-size: 12px;
    opacity: 80%;
}

.pinglun2 {
    position: relative;
    width: 700px;
    height: 100px;
    margin-left: 100px;
    margin-top: 2vh;
    /*  background: rgb(82, 73, 73, .6); */
}

.pinglunlist .pinglun2 img {
    width: 50px;
    height: 50px;
    border: 50%;
    float: left;
}

.pinglunlist .pinglun2 span {
    width: 100px;
    height: 50px;
    float: left;
}

.pinglunlist ul li .pinglun2 p {
    width: 600px;

    transform: translateX(-3vw);
}</style>
